<template>
    <div class="home">
        <!-- 吸顶 -->
        <div class="show-header" v-show="showHeader">
            <img src="../../assets/img/header.jpg" alt="" @click="back">
        </div>
        <!-- 轮播图 -->
        <div class="banner">
            <!-- 轮播图 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in banner" :key="index">
                        <img :src="item.picUrl" alt="">
                    </van-swipe-item>
                    
            </van-swipe>
            <!-- nav导航 -->
            <ul class="nav">
                <li>
                    <img src="../../assets/img/love.png" alt="">
                    <p>签到</p>
                </li>
                <li>
                    <img src="../../assets/img/lv.png" alt="">
                    <p>礼券</p>
                </li>
                <li>
                    <img src="../../assets/img/wg.png" alt="">
                    <p>砍价</p>
                </li>
                <li>
                    <img src="../../assets/img/dp.png" alt="">
                    <p>专栏</p>
                </li>
            </ul>
        </div>
        <!-- 全民砍价 -->
        <yx-title @click="router.push('/bargain')">全民砍价</yx-title>
        <!-- 精选专题 -->
        <yx-title @click="$router.push('/specialList')">精选专题</yx-title>
        <!-- 专题 -->
        <div class="news">
            <ul>
                <li v-for="(item,index) in newsList" :key="index">
                    <img :src="item.pic" alt="">
                    <h4>{{item.title}}</h4>
                    <p>{{item.descript}}</p>
                </li>
            </ul>
        </div>
        <!-- 人气推荐 -->
        <yx-title @click="router.push('/goodsList')">人气推荐</yx-title>
        <div class="goods"><goods-item v-for="(item,index) in goodsList" :key="index" :item="item" aa="123" @click="goDetail(item.id)"></goods-item>
        </div>
    </div>
</template>
<script>
import {getBanner,getNews,getGoodsList} from '@/utils/home.js'
import {reactive,toRefs} from 'vue'
import yxTitle from '@/components/yxTitle'
import goodsItem from '@/components/goodsItem'
import {useRouter} from 'vue-router'
export default {
    created() {

        let arr = [1,2,3,4,5]
       
        let arr1=[{name:'zs',age:10},{name:'ls',age:20},{name:'ww',age:30},{name:'zl',age:40}]

         //1.通过arr 变成 [3,6,9,12,15]
        // 2.把arr数组中的数字累加，得出结果
        // 3.找出arr1中年龄最大的人名
        // 4.用some方法找出数组中年龄大于40的返回值
        // 5.用every方法找出数组中年龄大于20的返回值





    },
    setup(props) {
        const router = useRouter()
        const data = reactive({
            banner:[],//存放请求过来的轮播图地址
            newsList:[],//存放专题列表
            goodsList:[],//存放商品列表
            showHeader:false,//吸顶的默认值 。false不显示
        })
        // console.log(data);
        getBanner().then(res=>{
            // console.log(res);
            data.banner = res.data
        })
        // 获取专题列表
        getNews().then(res=>{
            // console.log(res);
            data.newsList = res.data
        })
        // 获取商品列表
        getGoodsList().then(res=>{
            // console.log(res);
            // 截取商品列表中的四个
            data.goodsList = res.data.slice(9,13)
        })
        // onscroll滚动条的滚动事件

        window.onscroll = function(){
            console.log('11');
            // 获取滚动的距离
            let top = document.documentElement.scrollTop
            // console.log(top);//scrollTop获取滚动条的高度
            if(top>200){
                data.showHeader = true
            }else{
                data.showHeader = false
            }
        }
        // 点击返回底部
        const back = ()=>{
             // 获取滚动的距离
            let top = document.documentElement.scrollTop  //100px
            let timer = setInterval(()=>{
                if(top>0){
                    // top-=10
                    top=top-1
                    // 把每次-10之后的值赋给document.documentElement.scrollTop
                    document.documentElement.scrollTop = top

                }else{
                    // 清除定时器
                    clearInterval(timer)
                }
            },10)
        }
        const goDetail=(id)=>{
            //  router.push({name:'detail',query:{id}}) query传参
            // router.push({name:'detail',params:{id}})  //params传参
            router.push(`/detail/${id}`)//动态路由传参
        }
        
        return {...toRefs(data),router,back}

    },
    components:{
       yxTitle,
       goodsItem
    }
}
</script>
<style lang="scss" scoped>
.home{
    background: #f5f5f5;
    font-size: 16px;
    margin-bottom: 50px;
    
}
.banner{
    position: relative;//
    .my-swipe{
        img{
            width: 100%;
            height: 375px;
        }
    }
    .nav{
        position: absolute;
        left:0;
        bottom: 0;
        background: #fff;
        display: flex;
        border-radius: 20% 20% 0 0;
        padding-top: 10px;
        height: 115px;
        width: 100%;
        li{
            flex:1;
            text-align: center;
            img{
                width:42px;
                height: 42px;
            }
            p{
                font-size: 16px;
                margin-top: 10px;
            }
        }
        
    }
}
.news{
    width: 100%;
    overflow-x: auto;
    background: #fff;
    ul{
        width:calc(330 * 5px);
        display: flex;
        li{
            width:320px;
            margin-left: 10px;
            img{
                width:100%;
                height: 205px;
                border-radius: 4px;
            }
            
            h4{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                padding: 0 5px;
            }
            p{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 12px;
                color: #999;
                margin: 15px 0;
                padding: 0 5px;
            }
        }
    }
}
.goods{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 10px;
     background: #fff;
}
.show-header{
    position: fixed;
    left:0;
    top:0;
    z-index: 999;
    width: 100%;
    background: #fff;
    text-align: center;
    

    img{
        width: 36px;
        height: 36px;
        margin-top: 2px;
    }
}

</style>
